<template>
  <div class="home" style="background-color: #f3f3f3;">

    <!-- 头部区域 -->
    <el-row class="bg-lightgreen shadow" type="flex" align="middle">
      <el-col :span="2" :offset="2">
        <img style="cursor: pointer;" src="../assets/imgs/home/hubu_logo.png" alt="" @click="backToHome()">
      </el-col>
    </el-row>
    <!-- 面包屑 -->
    <div class="bg-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/moreteacher' }">更多教师</el-breadcrumb-item>
            <el-breadcrumb-item>教师详情</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <!-- 内容主体部分 -->
    <div id="main">
      <!-- Main content -->
      <div class="document shadow">
          <el-row :gutter="20" class="course-content">
              <el-col :span="10" :offset="0">
                <div class="course-desc">
                    <img :src="avatar_url" class="course-img">
                </div>
              </el-col>
              <el-col :span="14" :offset="0">
                  <div class="course-textdesc">
                    <div class="course-info">{{name}}</div><hr>
                  </div>
                  <div class="semester">基本信息</div>
                  <el-row>
                    <el-col class="text-content">
                      政治面貌：{{political_status}}
                    </el-col>
                    <el-col class="text-content">
                      职称：{{position}}
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col class="text-content">
                      所属学院：{{school_name}}
                    </el-col>
                    <el-col class="text-content">
                      联系方式：{{telephone}}
                    </el-col>
                  </el-row>
              </el-col>
          </el-row>
      </div>
      <el-row :gutter="20" class="course-content">
          <el-col :span="14">
              <div class="document shadow">
                  <div class="left_div">
                    <div class="course-title">简介</div>
                    <div class="text-content">{{summary}}</div>
                    <div class="course-title">导师风采</div>
                    <div class="text-content">{{detail}}</div>
                  </div>
              </div>
          </el-col>
          <el-col :span="10">
              <div class="document shadow">
                <div class="left_div">
                  <div class="semester">个人荣誉</div><hr>
                  <div class="teacher-card" v-for="item in honorList" :key="item.id">
                    <div>{{item.honorContent}}</div>
                      <!-- <img class="teacher-avatar" :src="item.avatar_url">
                      <div class="teacher-desc">
                          <span class="teacher-name">{{item.name}}</span>
                          <span>{{item.position}}</span>
                          <span>湖北大学</span>
                      </div> -->
                  </div>
                </div>
                <!-- <div class="teacher-card">
                    <img class="teacher-avatar" src="../assets/imgs/teacher_cuihaibo.png">
                    <div class="teacher-desc">
                        <span class="teacher-name">崔海波</span>
                        <span>副教授</span>
                        <span>湖北大学</span>
                    </div>
                </div>
                <div class="teacher-card">
                    <img class="teacher-avatar" src="../assets/imgs/teacher_yudunhui.png">
                    <div class="teacher-desc">
                        <span class="teacher-name">余敦辉</span>
                        <span>教授</span>
                        <span>湖北大学</span>
                    </div>
                </div> -->
              </div>
          </el-col>
      </el-row>
    </div>

    <footer id="footer">
      <div class="foot-motto">
        <el-row :gutter="10" class="foot-icons">
          <el-col :span="3" :offset="0" class="icon">
            <a href="http://news.hubu.edu.cn/">
              <img src="../assets/imgs/home/home-link01.png">
              湖大新闻
            </a>
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <a href="http://media.hubu.edu.cn/index/hddst.htm">
              <img src="../assets/imgs/home/home-link02.png">
              广播电视
            </a>
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <a href="http://hubu.ihwrm.com/index/article/oldrelease.html">
              <img src="../assets/imgs/home/home-link03.png">
              电子校报
            </a>
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <a href="http://mailbox.hubu.edu.cn/">
              <img src="../assets/imgs/home/home-link04.png">
              校务信箱
            </a>
          </el-col>
          <el-col :span="3" :offset="0">
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <el-popover
              placement="top"
              width="150"
              trigger="hover">
              <img src="../assets/imgs/home/QR-site.png" style="transform: translate(20px, 0);">
              <a href="#" slot="reference">
                <img src="../assets/imgs/home/home-link05.png">
                湖大官网
              </a>
            </el-popover>
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <el-popover
              placement="top"
              width="150"
              trigger="hover">
              <img src="../assets/imgs/home/QR-wx.png" style="transform: translate(20px, 0);">
              <a href="#" slot="reference">
                <img src="../assets/imgs/home/home-link06.png">
                湖大微信
              </a>
            </el-popover>
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <el-popover
              placement="top"
              width="150"
              trigger="hover">
              <img src="../assets/imgs/home/QR-wb.png" style="transform: translate(20px, 0);">
              <a href="#" slot="reference">
                <img src="../assets/imgs/home/home-link07.png">
                湖大微博
              </a>
            </el-popover>
          </el-col>
        </el-row>
      </div>
    </footer>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  data () {
    return {
      carouselList: [
        {
          url: require('../assets/imgs/home/carousel_1.jpeg'),
          link: '/content1'
        }, {
          url: require('../assets/imgs/home/carousel_2.png'),
          link: '/content2'
        }, {
          url: require('../assets/imgs/home/carousel_3.jpeg'),
          link: '/content3'
        }, {
          url: require('../assets/imgs/home/carousel_4.jpeg'),
          link: '/content4'
        }, {
          url: require('../assets/imgs/home/carousel_5.png'),
          link: '/content5'
        }
      ],
      newsCarousel: [{
        url: require('../assets/imgs/home/news01.jpeg')
      }, {
        url: require('../assets/imgs/home/news02.jpeg')
      }, {
        url: require('../assets/imgs/home/news03.jpeg')
      }],
      honorList: [],
      // content: []
      avatar_url: '',
      name: '',
      political_status: '',
      position: '',
      school_name: '',
      telephone: '',
      summary: '',
      detail: ''
    }
  },
  // 执行方法
  created () {
    this.GetHonorGroup()
    this.GetTeacherDetail()
  },
  methods: {
    backToHome () {
      this.$router.push('home')
    },
    async GetHonorGroup () {
      var teacherid = window.sessionStorage.getItem('chosenTeacher')
      const { data: res } = await this.$http.post('board/all/selectGoodTeacherOrStudentById?id=' + teacherid)
      if (res.state != true) return
      console.log(res)

      res.detail.honorList.forEach(item => {
        var obj = {
          createTime: '',
          updateTime: '',
          honorContent: ''
        }
        obj.createTime = item.createTime
        obj.updateTime = item.updateTime
        obj.honorContent = item.honorContent
        this.honorList.push(obj)
      })
    },
    async GetTeacherDetail () {
      var teacherid = window.sessionStorage.getItem('chosenTeacher')
      const { data: res } = await this.$http.post('board/all/selectGoodTeacherOrStudentById?id=' + teacherid)
      if (res.state != true) return
      console.log(res)

      var item = res.detail.userMessage
      // console.log(item)
      // var obj = {
      //     courseName: '',
      //     courseDetail: '',
      //     instructionalObjectives: '',
      //     openingSemester: '',
      //     credit: '',
      //     classPeriod: '',
      // }
      // obj.courseName=item.courseName
      // obj.courseDetail=item.courseDetail
      // obj.instructionalObjectives=item.instructionalObjectives
      // obj.openingSemester=item.openingSemester
      // obj.credit=item.credit
      // obj.classPeriod=item.classPeriod
      // this.content.push(obj)
      this.avatar_url = item.avatar_url
      this.name = item.name
      this.political_status = item.political_status
      this.position = item.position
      this.school_name = item.school_name
      this.telephone = item.telephone
      this.summary = item.summary
      this.detail = item.detail
    }
  }
}
</script>

<style lang="less" scoped>
.bg-lightgreen {
  background-color: #1e6f46;
  // background-image: linear-gradient(to bottom, #638b6e, #87ac92);
  height: 100px;
  border-radius: 2px;
  border-bottom: 2px solid #799982;
}

.bg-breadcrumb {
  background-color: #FFFFFF;
  height: 35px;
  line-height: 35px;
  width: 100%;

  .el-breadcrumb {
    height: 35px;
    line-height: 35px;
    margin-left: 6%;
  }
}

// 主体内容部分
#main {
  padding: 0 6%;    // 可以通过这里的padding来更改两边的留白
  margin-bottom: 10px;
  background: url('../assets/imgs/home/sy-bg.jpeg') no-repeat bottom;

  .carousel {
    width: 100%;
    height: 400px;
    margin-top: 5px;

    .carousel-img {
      width: 100%;
      height: 100%;
    }
  }

  //主体内容部分
  .document {
    padding: 0 40px;
    background-color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;

    .left_div {
        background-color: #fff;
        height: 500px;
    }
    .course-desc {
      padding: 10px;
      margin: 10px;
    }
    .course-textdesc {
        // padding: 10px;
        margin: 10px;
    }
    .course-info {
        font-size: 50px;
        font-weight: 900;
    }
    .course-img {
        width: 240px;
        height: 300px;
        border-radius: 5px;
    }
    .course-title {
        font-size: 18px;
        font-weight: 700;
        padding: 20px;
    }
    .text-content {
        color: #6C6C6F;
        padding: 10px;
    }
    .semester {
        font-size: 18px;
        font-weight: 900;
        padding-top: 18px;
        padding-left: 10px;
        padding-bottom: 10px;
        text-align: left;
    }
    .teacher-card {
        height: 25px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .teacher-avatar {
            height: 70px;
            width: 70px;
            border-radius: 50%;
        }

        .teacher-desc {
            width: 80%;
            float: right;
            display: flex;
            margin-left: 40px;
            height: 60%;
            // background-color: #ddd;
            flex-direction: column;
            justify-content: space-around;
            align-items: stretch;

        .teacher-name {
            float: right;
            font-size: 17px;
            color: black;
            font-weight: 800;
            }

        span {
            display: block;
            height: 20px;
            float: right;
            font-size: 14px;
            color: #a2a2ad;
            }
        }
    }
  }
}

#footer {
  height: 110px;
  box-sizing: border-box;
  padding: 0 170px;
  border-radius: 2px;
  background: url('../assets/imgs/home/foot-bg.jpeg') no-repeat;

  .foot-motto {
    width: 650px;
    height: 100%;
    margin: 0 auto;
    padding-left: 450px;
    background: url('../assets/imgs/home/motto.png') no-repeat left top;

    .foot-icons {
      transform: translate(0, 30%);
      // background-color: #fff;
      height: 65%;
      display: flex;

      .icon {
        height: 100%;

        a {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 14px;
          color: #bed2c6;
          line-height: 32px;
        }
      }
    }
  }
}

</style>
